<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>表单输入绑定</title>
    <script src="./lib/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <div id="example-1">
        <!-- 单行输入数据双向绑定 start-->
        <input v-model="message" placeholder="edit me">
        <p>Message is: {{ message }}</p>
        <!-- 单行输入数据双向绑定 end-->
        <!-- 文本域数据双向绑定 start-->
        <textarea v-model="message2" placeholder="add multiple lines"></textarea>
        <p style="white-space: pre-line;">Message is: {{ message2 }}</p>
        <!-- 文本域数据双向绑定 end-->
        <br/>
        <!-- 复选框数据双向绑定 start-->
        <div style="margin-top:20px;">
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div>
        <!-- 复选框数据双向绑定 end-->
        <!-- 单选框数据双向绑定 start-->
        <div style="margin-top:20px;">
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <br>
            <span>Picked: {{ picked }}</span>
        </div>
        <!-- 单选框数据双向绑定 end-->
        <!-- 表单数据提交 start-->
        <button type="button" @click="submit">提交</button>
        <!-- 表单数据提交 end-->
    </div>

</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            message: "test",
            message2: "hi",
            checkedNames: ['Jack', 'John'],
            picked: "Two"
        },
        methods: {
            submit: function () {
                console.log(this.message);

            }
        }
    });
</script>
<style type="text/css">

</style>
</body>
</html>
